<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>
			div{
				width: 500px;
				height: 500px;
				background-color: #00ffff;
				background-image: url(./img/小新.png);
				background-size:30% 30%;
				background-repeat:no-repeat;
				/* 背景定位 */
				background-position: 80% 0%;
				background-position:center;
		}
		body{
			/* 水印：1.加高度【滚动条】 */
			height:1000000px;
			/* 3.启动背景图模式：等比例缩放模式 */
			background-size: cover;
			/* 2.背景图 */
			background-image: url(./img/小新.png);
			/* 4.设置滚动模式 */
			background-attachment: fixed;
		}
		</style>
	</head>
	<body>
		<!-- 背景属性：页面上可以任意调整位置或者改变图片的效果
		     ①background-color背景颜色[子属性可以省略]
			 ②background-image[指定背景图] url() url("") url('')
			 ③background-size背景尺寸  属性值 两种 ①px 绝对  %范围值
			                                    ②函数模式  1.contain 等比例缩放图片
												           保证图片完全显示页面中
												          2.cover 等比例放大
														 覆盖图片
			 ④[前提:背景图小于空间] background-repeat背景重复
			 ⑤[前提:背景图小于空间] background-position背景属性:给背景图定位
			                                        属性值:X% Y%
													      数值px  数值Px
														  英文
             ⑥背景固定属性:background-attachment[用法:搭配background-size函数]
			 背景图水印效果,步骤1:高度滚动条
			                  2：背景图存入body中
							  3：背景图前启动模式  contain
							  4.启动背景固定属性fixed
		 -->
		 <div></div>
		 Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum asperiores, provident ex, quae laborum ea voluptatibus autem deserunt expedita minus et molestiae beatae iusto facere dolores delectus aliquid ad ipsam. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci mollitia ex dolor tempore quo suscipit rerum itaque quia, impedit delectus ullam ipsa temporibus perspiciatis quos illum vel inventore! Rem, dolores. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo nihil sequi tempore error ad odit voluptates nesciunt, tenetur voluptate optio tempora obcaecati veritatis sed quibusdam, eius eum reprehenderit qui commodi. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt laudantium cum porro explicabo quaerat esse vitae vero consequuntur accusamus nostrum molestias soluta dicta consequatur, illum voluptatibus expedita nam delectus labore! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos debitis harum, eveniet iusto quas eos esse neque, libero nobis magnam molestiae quibusdam accusamus nisi quidem deserunt, ea quod officia nam.
	</body>
</html>